<template>
	<view class="container">
		<!-- 登录界面的背景图 -->
		<view>
			<image class="backgroundp" src="/static/bg.jpg"></image>
			<!-- 绿色色块 -->
			<!-- <view class="empty-block"></view> -->
		</view>
		<view>
			<!-- 添加空格实现界面的优化 -->
			<view class="blank-top"></view> 
			<!-- 学校徽标 -->
			<view class="imageContent">
				<image  src="/static/logo-ucas.png" mode="aspectFit"
					@error="imageError"></image>
			</view>
			<!-- 登录界面的中间提示文字 -->
			<view class="load">
				<text class="text">欢迎登录果壳悦食!</text>
			</view>
		</view>
		<!-- 登录的表单 -->
		<view class="form-content">
			<u-form :model="form" ref="uForm" label-width="50">
				<!-- ID输入框，限制字体大小输入格式、长度；和提示的前置图标与提示输入的文字 -->
				<u-form-item prop="userID">
					<u-input prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
						v-model="form.userID" clearable shape="circle" :adjustPosition="false"
						maxlength=9
						placeholder="请输入ID号" />
				</u-form-item>
				<!-- 密码输入框 -->
				<u-form-item prop="user_password">
					<u-input prefixIcon="lock" type="password" prefixIconStyle="font-size: 22px;color: #909399"
						v-model="form.user_password" clearable shape="circle" :adjustPosition="false"
						maxlength=16
						placeholder="请输入密码" />
				</u-form-item>
				<!-- 提交按钮 -->
				<u-button class="custom-style" :disabled="isLogining" :loading="isLogining" shape="circle" size="medium"
					@click="loginRequest">登录</u-button>
				<view class="register-link">
									<text @click="navigateToRegister">注册</text>
				</view>
			</u-form>
		</view>
		<!-- 添加空格实现界面的优化 -->
		<view class="blank-bottom"></view> 
	</view>
</template>

<script>
	import globalSetting from '@/common/json/globalSetting.json'; // 针对服务器的api，url,还有对于页面加载的时间延迟，设置全局变量，优化代码
	export default {
		data() {
			return {
				success: false, // 是否可以登录
				is_admin: false, // 管理员身份判断
				isNetworkBusy: true, // 网络繁忙
				isLogining: false, // 加载提示
				token: "", // 存储 Token
				
				// 通过v-model连接的输入变量
				form: {
					userID: '0001',
					user_password: 'password0001'
				},
				// form表单的rules规则，即红色字体提示
				rules: {
					userID: [{
						required: true,
						message: '请输入ID号',
						trigger: ["change", "blur"],
					}, {
						pattern: /^[0-9a-zA-Z]*$/g, // 正则表达式限制输入只能是字母或则数字
						transform(value) {
							return String(value);
						},
						message: '只能包含字母或数字',
						trigger: ["change", "blur"],
					}, {
						max: 20,
						message: "ID长度不能超过20",
						trigger: ["change", "blur"],
					}],
					user_password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字',
							trigger: ["change", "blur"],
						},
						{
							min: 6,
							max: 16,
							message: "密码长度为6~16位",
							trigger: ["change", "blur"],
						}
					]
				}
			};
		},
		
		// 页面加载的时候触发的函数
		onLoad() {
			uni.setNavigationBarTitle({ // 动态设置但前页面的标题
				title: "登录",
			})
		},
		
		//停止当前页面的下拉刷新
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		methods: {
			//显示弹窗，封装为一个函数，优化代码结构
			showPrompt(text) {
				uni.showModal({
					content: text,
					showCancel: false,
				})
			},

			async loginRequest() { 
				this.removeInfoFromCache();		//清除数据，防止数据因本地缓存在后期造成冲突（如单机登录多号）
				this.isLogining = true; //加载提示
				
				this.$refs.uForm.validate().then( // form表单rules规则的判定语句，如果rules规则格式错误则不会执行登录功能
					async res => { // 同异步处理
						// 判断输入是否为空
						var userNameIsEmpty = (this.form.userID == "");
						var passwordIsEmpty = (this.form.user_password == "");
						if (userNameIsEmpty || passwordIsEmpty) { //判断输入内容是否为空
							this.showPrompt("ID号和密码不能为空！");
							this.isLogining = false;
							return;
						}
						
						await this.sendRequest(); //发起请求判断用户名和密码是否正确
						// 检测当前网路是否正常
						if (this.isNetworkBusy == true) {
							this.showPrompt("网络繁忙，请稍后重试");
						} else if (this.success == true) { //允许登录
							uni.setStorageSync("access_token", this.token); // 保存 Token
							uni.setStorageSync("EASYCMP_ID", this.form.userID);			//ID缓存至本地，利于后期的优化
							if (this.is_admin){ // 进入管理员界面
								uni.showToast({
									icon: "success",
									content: "管理员登录成功",
								})
								location.href = `${this.$baseUrl}/admin/admin?token=${this.token}`;
							} else { // 正常用户登录
								uni.showToast({
									icon: "success",
									content: "登录成功",
								})
								uni.switchTab({
									url: "/pages/index/homepage"
								})
							}
							
						} else { //拒绝登录
							this.showPrompt("用户名或密码错误，请检查重试");
						}
						this.isLogining = false; // 加载提示消失
						return;
					}
				).catch(
					error => {
						this.isLogining=false;
						this.showPrompt("填写信息有误，请确认后重试");
					}
				)
				
			},

			async sendRequest() { 
				await uni
					.request({
						url:`${this.$baseUrl}/user/loginService`, // 登录的url
						data: { // request传输的数据
							uUserName: this.form.userID,
							uPassword: this.form.user_password, 
						},
						header:{
							'Contene-Type':'application/json'
						},
						method: "POST", // POST http网路请求
						timeout: globalSetting.TIME_OUT, // 全局变量的时间限制
					}).then((data) => { // 请求成功从后端返回的数据
						var [err, res] = data;
						if (err != null) { // data为一个数组，其中的0位是返回的错误信息，如果为null则表示网络正常
							this.isNetworkBusy = true;
						} else {
							this.isNetworkBusy = false;
							this.success = res.data.success; // 接受后端返回的数据，验证是否可以正常登录
							this.token = res.data.token; // 接收后端返回的 Token
							this.is_admin = res.data.is_admin;
						}
					});
				return;
			},
			
			// 跳转到注册页面
			navigateToRegister() {
				uni.navigateTo({
					url: "/pages/index/register" 
				});
			},

			removeInfoFromCache() { //清除缓存，防止上一账号的信息通过缓存在个人中心加载到新号
				uni.removeStorageSync("access_token");
			}

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style scoped lang="scss">
	body {
	    background-color: #A0E66A; // 设置底色
	}
	// 页面主容器
	.container {
	  display: flex;
	  flex-direction: column; // 子元素纵向排列
	  align-items: center; // 水平居中
	  justify-content: center; // 垂直居中
	  height: 100vh; // 占满屏幕高度
	  position: relative; // 相对定位，便于背景图调整
	}

	// 顶部的空白区域
	.blank-top {
		width: 50rpx;
		height: 50rpx;
		margin: 0 auto; // 水平居中
		margin-bottom: 50rpx;
	}

	// 学校的徽标
	.imageContent {
		display: flex; /* 使用 Flex 布局 */
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		margin: 0 auto; /* 确保容器本身水平居中 */
		width: auto; /* 可根据需求调整宽度 */
		height: auto; /* 自动调整高度，保持比例 */
	}

	// 中间提示文字
	.text {
		font-size: 50rpx;
		color: #333; // 提示文字颜色
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		text-align: center; // 居中文本
	}

	// 表单容器
	.form-content {
		margin-top: 50rpx;
		width: 400rpx; // 表单宽度
		padding: 30rpx; // 内间距
		border: 1px solid #e2e2e2; // 边框颜色
		border-radius: 25rpx; // 圆角边框
		box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1); // 添加阴影效果
		background-color: #fff; // 表单背景色
	}

	// 提交按钮
	.custom-style {
		margin-top: 50rpx;
		color: #000; // 字体颜色
		width: 250rpx; // 按钮宽度
		height: 60rpx; // 按钮高度
		line-height: 60rpx; // 垂直居中
		text-align: center; // 水平居中
		background-color: #ffffff; // 按钮背景色
		border: 1px solid #bcbcbc; // 边框颜色
		border-radius: 12rpx; // 按钮圆角
		cursor: pointer; // 鼠标悬浮样式
		transition: all 0.3s; // 添加过渡效果
	}
	
	// 注册文字超链接样式
	.register-link {
		margin-top: 20rpx;
		text-align: center;
		color: #007AFF; // 超链接的蓝色
		font-size: 28rpx;
		text-decoration: underline; // 添加下划线
		cursor: pointer; // 鼠标悬停时显示手型
	}
	

	.custom-style:hover {
		background-color: #f0f0f0; // 悬停时的背景色
		border-color: #a9a9a9; // 悬停时的边框颜色
	}

	// 登录页面的背景图
	.backgroundp {
		z-index: -2; // 确保背景图在底层
		width: 100%;
		height: 100%;
		position: absolute;
		// top: 100rpx;
		left: 0;
		// bottom: 100rpx;
		object-fit: cover; // 背景图保持比例填充
		opacity: 0.45; // 添加透明度效果
	}
	
	// /* 绿色色块 */
	// .nutrition-block {
	// 	position: absolute;
	// 	width: 100%; /* 可根据需要调整宽度 */
	// 	height: 100%; /* 可根据需要调整高度 */
	// 	background-color: rgba(168, 187, 165, 1); /* 柔和绿色，带透明度 */
	// 	z-index: -1; /* 位于背景图上方，内容下方 */
	// }
	
	// 顶部的空白区域
	.blank-bottom {
		width: 50rpx;
		height: 200rpx;
		margin: 0 auto; // 水平居中
		margin-bottom: 50rpx;
	}

	// 小屏幕适配
	@media screen and (max-width: 768px) {
		.form-content {
			width: 70%; // 小屏幕表单宽度自适应
		}

		.custom-style {
			width: 50%; // 按钮宽度自适应
		}
	}
</style>